<template>
    <view class="work-content">
        <view class="content-list" v-for="item in hotThemeData" @click="handleClick(item)">
            <view class="head-bar">
                <u--image :showLoading="true" :src="imgUrl+item.accessory" width="80px" height="80px"></u--image>
                <view class="right">
                    <view class="title">{{item.name}}</view>
                    <view class="text">{{item.title}}</view>
                </view>
            </view>
            <view class="content-bar">
                <view class="bar-info">{{item.userName}}</view>
                <view class="bar-info">{{item.create_time}}</view>
            </view>
            <view class="footbar">
                <view class="card-actions-item">
                    <uni-icons type="hand-up" size="20" color="#999"></uni-icons>
                    <text class="card-actions-item-text">{{item.like_num}}</text>
                </view>
                <view class="card-actions-item">
                    <uni-icons type="star" size="20" color="#999"></uni-icons>
                    <text class="card-actions-item-text">{{item.collect_num}}</text>
                </view>
                <view class="card-actions-item">
                    <uni-icons type="chat" size="20" color="#999"></uni-icons>
                    <text class="card-actions-item-text">{{item.review_num}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import config from '@/config'
    import { getHotTheme } from '@/api/work'
    export default {
        data() {
            return {
                hotThemeData:[],
                imgUrl: config.imgUrl,
            }
        },
        created(){
            this.getHotThemeData();
        },
        methods: {
            handleClick(item) {
                if(this.type == "2"){
                    this.$tab.navigateTo(`/pages/work/circleDetails?themeId=`+item.id)
                }else{
                    this.$tab.navigateTo(`/pages/work/topicdetails?themeId=`+item.id)
                }
            },
            getHotThemeData(){
                getHotTheme({ deviceId: this.$store.state.user.deviceId}).then(res=>{
                    this.hotThemeData = res.records;
                })
            },
        }
    }
</script>

<style lang="scss">
    page{
        background: #ddd;
    }
    .work-content{
        .content-list{
            background: #fff;
            margin: 10px;
            .head-bar{
                display: flex;
                align-items: center;
                padding: 10px;
                .right{
                    margin-left: 15px;
                    .title{
                        font-size: 20px;
                        color:#666;
                    }
                    .text{
                        font-size: 14px;
                        color:#999;
                    }
                }
            }
            .content-bar{
                display: flex;
                justify-content: space-between;
                border-top: 1px solid #eee;
                padding: 10px;
            }
            .footbar{
                border-top: 1px solid #eee;
                padding: 10px;
                display: flex;
                justify-content: space-between;
                .card-actions-item{
                    display: flex;
                    align-items: center;
                }
            }
            /*.foot-bar{
                display: flex;
                background: #dfdfe2ad;
                justify-content: space-between;
                margin: 10px -10px;
                padding: 5px 10px;
                .left{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .name{
                        margin-left: 5px;
                        color:#2c2c2c;
                        font-size: 12px;
                        .time{
                            margin-left: 5px;
                            color:#666;
                        }
                    }
                }
                .option-right{
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    color:#999;
                }
            }*/
        }
    }
</style>
